<template>
    <el-container>
        <el-header>
            <cli-title-student></cli-title-student>
        </el-header>
        <el-main>
            <div class="center" v-if="getData">
                <div style="display: flex; align-items:center;">

                    <el-row style="margin-left: 50px">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>博客设置</span>
                            </div>
                            <el-row>
                                <span class="text">博客标题</span>
                            </el-row>
                            <div style="margin: 8px 0;"></div>
                            <el-row>
                                <el-input
                                        type="text"
                                        placeholder="新博客标题"
                                        v-model="title"
                                        maxlength="10"
                                        show-word-limit
                                >
                                </el-input>
                            </el-row>
                            <div style="margin: 15px 0;"></div>
                            <el-row>
                                <span class="text">博客描述</span>
                            </el-row>
                            <div style="margin: 8px 0;"></div>
                            <el-row>
                                <el-input
                                        type="textarea"
                                        placeholder="新博客描述"
                                        v-model="description"
                                        maxlength="30"
                                        show-word-limit
                                >
                                </el-input>
                            </el-row>
                            <div style="margin: 15px 0;"></div>
                            <el-row>
                                <span class="text">博客权限</span>
                            </el-row>
                            <div style="margin: 8px 0;"></div>
                            <el-row>
                                <el-select v-model="value" placeholder="请选择"
                                           @change="selectTrigger(value)">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-row>
                            <div style="margin: 20px 0;"></div>
                            <el-row type="flex" justify="center">
                                <el-col :span="10">
                                    <el-button type="primary" size="mini" @click="confirm" round>确定</el-button>
                                </el-col>
                                <el-col :span="10">
                                    <el-button size="mini" @click="cancel" round>取消</el-button>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-row>
                </div>
            </div>
        </el-main>
        <el-footer>
            <page-footer></page-footer>
        </el-footer>
    </el-container>
</template>

<script>
    import PageFooter from "../../../components/base/pageFooter";
    import CliTitleStudent from "../../../components/base/cliTitleStudent";
    import blogSetting from "../../../components/setting/blogSetting"
    import POST from "../../../api/POST";

    export default {
        data() {
            return {
                title: blog.title,
                description: blog.content,
                options: [{
                    value: '选项1',
                    label: '公开'
                }, {
                    value: '选项2',
                    label: '私有'
                }],
                value: '私有',
                blogId: '',
                blog: [],
                getData: false,
            }
        },
        name: "blogedit",
        components: {blogSetting, CliTitleStudent, PageFooter},
        created() {
            this.blogId = this.$route.params.blogId;
            console.log(this.blogId);
            let data = {'blog_id': this.blogId};
            POST.blogShowList(data).then(res => {
                this.blog = res.content
                this.getData = true;
            });
        }, methods: {
            selectTrigger(val) {
                if (val === "选项1") {
                    this.prompt();
                }
            },
            prompt() {
                this.$confirm('此操作将博客设置为公开, 是否继续?', '权限设置', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '设置成功!'
                    });
                    this.goPublic();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消设置'
                    });
                });
            },
            goPublic() {

            },
            confirm() {

            },
            cancel() {
                this.title = "";
                this.description = "";
            }
        }
    }
</script>

<style scoped>
    .center {
        width: 1000px;
        margin: 50px auto;
    }
</style>